<template lang="html">
  <div class="allGoodsBox">
    <el-row class="formBox box1">
      <el-col :span="2" class="text-right headLable">
        <span>订单号：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.orderNo" size="small" class="text" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>产品名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input class="text" v-model="form.productName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>下单时间：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-date-picker
          v-model="form.orderTime"
          size="small"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right headLable">
        <span>客户名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input class="text" v-model="form.userName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>客户手机：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input class="text" size="small" v-model="form.userPhone" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find()">筛选</el-button>
       </el-col>
       <!-- <el-col :span="2" class="text-left" >
         <el-button type="success" size="small" @click="changeDialog(7)">#拉取订单</el-button>
       </el-col> -->
    </el-row>
    <el-row class="tableBox" v-loading.body="$store.state.TanGoods.loading">
      <ul class="listBox3">
        <li class="first">
          <span class="order">
            <el-checkbox class="check allcheck" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
            订单号
          </span>
          <span class="name gray">产品名</span>
          <span class="price gray">单价</span>
          <span class="numb gray">数量</span>
          <span class="pay gray">实付</span>
          <span class="customer gray">客户</span>
          <span class="downTime green" @click="timeSort1">下单时间 {{sortType1?'↑':'↓'}}</span>
          <span class="updateTime green" @click="timeSort2">更新时间{{sortType2?'↑':'↓'}}</span>
          <span class="orderType gray">订单状态</span>
        </li>
        <el-checkbox-group v-model="checkedCities">
          <li v-for="item in $store.state.TanGoods.allGoodsList">
            <span class="order">
              <el-checkbox class="check" :label="item.id"></el-checkbox>
              {{item.orderNo}}<br>{{item.yzOrderNo}}
            </span>
            <span class="name text-left">
              <p>{{item.productName}}</p>
              <p class="txt">{{item.sku}}</p>
            </span>
            <span class="price text-left">{{item.price?item.price/100:'0'}}</span>
            <span class="numb text-left">x{{item.count?item.count:'0'}}</span>
            <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
            <span class="customer text-left">
              <p>{{item.customerName}}</p>
              <p>{{item.customerPhone}}</p>
            </span>
            <span class="downTime">
              <p>{{item. createTime | getDate}}</p>
              <p>{{item. createTime | getTime}}</p>
            </span>
            <span class="updateTime">
              <p>{{item.updateTime | getDate}}</p>
              <p>{{item.updateTime | getTime}}</p>
            </span>
            <span class="orderType">{{item.statusDesc}}</span>
          </li>
        </el-checkbox-group>
      </ul>
    </el-row>

    <el-row style="margin-top:10px; text-align:right;">
      <el-col :span="3" class="text-left">
        <el-button type="success" size="small" @click="pushChangeDialog(6)">发送微信推送</el-button>
      </el-col>
      <el-col :span="21" class="text-right">
        共{{this.$store.state.TanGoods.total}}条
        <span style="display:inline-block; min-width:100px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :page-count="$store.state.TanGoods.pages">
          </el-pagination>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var Mock = require('mockjs');
var url;

export default {
  data (){
    return {
      form:{
        orderNo:'',
        orderTime:'',
        otaPlatform:'',
        pageCount:3,
        productName:'',
        sort:'',
        status:'',
        userName:'',
        userPhone:''
      },
      checkAll:false,
      checkedCities:[],
      page:1,
      sortType1:false,
      sortType2:false
    }
  },
  filters:{
    getDate:function (val){
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      return year+"-"+month+"-"+day;
    },
    getTime:function (val){
      var date=new Date();
      date.setTime(val);
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return hours+":"+minutes
    }
  },
  methods: {
    changeDialog:function (type){
      var json1={
        'type':type,
        'name':'TanGoods',
        'title':'拉取订单'
      }
      console.log(json1);
      this.$store.dispatch('changeDialog',json1);
    },
    handleCheckAllChange:function (){
      if(this.checkAll){
        var arr=[];
        for(let i=0;i<this.$store.state.TanGoods.allGoodsList.length;i++){
          arr.push(this.$store.state.TanGoods.allGoodsList[i].id);
        }
        this.checkedCities=arr;
      }else{
        this.checkedCities=[];
      }

    },
    pushChangeDialog:function (type){
      if(this.checkedCities.length==0){
        this.$message({
          showClose: true,
          message: '请勾选订单',
          type: 'error'
        });
        return;
      }
      this.$store.dispatch('showLoading','TanGoods');
      var str='';
      for(let i=0;i<this.checkedCities.length;i++){
        str=str+this.checkedCities[i]+',';
      }
      axios.get(url+'/v1/push/wechat/preview',{
        params:{
          orderIds:str,
          templateCode:'HDQX'
        }
      }).then((res)=>{
        if(res.data.code==0){
          var json1={
            'type':type,
            'name':'TanGoods',
            'pushId':this.checkedCities,
            'title':'推送内容配置'
          }
          this.$store.dispatch('changeDialog',json1);
          // var json2={}
          // for(let i = 0; i < res.data.data.length; i++) {
          //   let item = res.data.data[i];
          //   if(item.label == '预约项目') {
          //     json2.productName=item.value;
          //   }
          //   if(item.label == '预约时间') {
          //     json2.time=item.value;
          //   }
          // }
          var json2={};
          json2.data=res.data.data;
          json2.id=str;
          this.$store.dispatch('wxpush',json2);
        }else{
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
        this.$store.dispatch('closeLoading','TanGoods');
      }).catch((err)=>{

      })
      //this.$store.dispatch('push',json1);

    },
    timeSort1:function (){
      this.sortType1=!this.sortType1;
      this.getList();
    },
    timeSort2:function (){
      this.sortType2=!this.sortType2;
      this.getList();
    },
    find:function (){
      this.getList();
    },
    handleSizeChange(val) {
      console.log('每页 ${val} 条');
    },
    handleCurrentChange() {
      console.log(this.page);
      this.getList();
    //  this.$store.dispatch('getGoods',this.json);
    },
    changeDialog:function (type,id){
      var json1={
        'type':type,
        'name':'TanGoods',
        'id':id,
        'title':'订单详情'
      }
      this.$store.dispatch('changeDialog',json1);
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanGoods');
      if(this.form.orderTime!=''){
        var time=this.form.orderTime.getTime()
      }else{
        var time='';
      }
      var str='';
      if(this.sortType1){
        str='orderTime_Up'
      }else{
        str='orderTime_Down'
      }
      if(this.sortType2){
        str=str+',updateTime_Up'
      }else{
        str=str+',updateTime_Down'
      }
      var json1={
        'orderNo':this.form.orderNo,
        'orderTime':time,
        'otaPlatform':'',
        'pageCount':10,
        'pageIndex':this.page,
        'productName':this.form.productName,
        'sort':str,
        'status':this.form.type,
        'type':'',
        'userName':this.form.userName,
        'userPhone':this.form.userPhone
      }
      // console.log(json1);
      this.$store.dispatch('getAllGoodsList',json1);
    }
  },
  created(){
    var that=this;
    url=this.$store.state.url;
    this.form.orderTime=new Date();
    this.getList();
  }
}
</script>
<style>
  .allGoodsBox .el-checkbox__label{display: none;}
</style>
<style lang="Sass" scoped>
.allGoodsBox{width: 100%; height: 100%;padding: 20px 10px 10px 10px; box-sizing: border-box;

  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 12px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 0 10px 20px 10px;}
  .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
  .cell{text-align: left;}
  .btn{height: 32px;
    span{line-height: 0px;  }
  }


}
.listBox3{width: 100%; background: #fff;

  .first{display: flex; height: 30px; text-align: left; padding: 0 5px;

      span{display: inline-block; font-size: 12px; line-height: 30px;}
      .order{flex: 0 0 220px;
        .el-checkbox__inner{width: 14px; height: 14px; margin-top: 10px;}
        .el-checkbox__inner::after{left: 3px; top:0px;}
      }
      .name{flex: 1;}
      .price{flex: 0 0 80px;}
      .numb{flex: 0 0 80px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 110px;}
      .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px; cursor: pointer;}
      .updateTime{flex: 0 0 80px; line-height: 30px; margin-top: 0px; cursor: pointer;}
      .orderType{flex: 0 0 80px;}
  }
  li{display: flex; height: auto;  text-align: left; padding: 15px 5px 0 5px; box-sizing: border-box;

    span{display: inline-block; box-sizing: border-box; color: #333; line-height: 14px;}
    .order{flex: 0 0 220px; height: auto; }
    .name{flex: 1;
      p{line-height: 14px; width: 90%; font-size: 12px;}
      .txt{color: #999; line-height: 14px; margin-top: 0px;}
    }
    .price{flex: 0 0 80px;}
    .numb{flex: 0 0 80px;}
    .pay{flex: 0 0 80px;}
    .customer{flex: 0 0 110px;
      p{line-height: 14px; margin-top: 0px; font-size: 12px;}
    }
    .downTime{flex: 0 0 90px; line-height: 12px;
      p{margin-bottom: 5px; font-size: 12px;}
    }
    .updateTime{flex: 0 0 80px; line-height: 12px;
      p{margin-bottom: 5px; font-size: 12px;}
    }
    .orderType{flex: 0 0 80px;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}

}
</style>
